<script>
import * as api from "../../api/top_menu/index"
import iconList from "@/config/iconList";

export default {
  name: "topMenuTemp",
  data() {
    return {
      formData: {
        nameCn: "",
        name: "",
        icon: "",
        code: "",
        enableFlag: 1,
        orders: "",
        menuChildrenIds: "",
      },
      rules: {
        "nameCn": [{required: true, trigger: "blur", message: "请输入菜单名称",}],
        "name": [{required: true, trigger: "blur", message: "请输入编码标识",}],
        "code": [{required: true, trigger: "blur", message: "请输入权限标识",}],
      },

      tableData: [],

      option: {
        header: false,
        calcHeight: 10,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: true,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: [
          {
            align: "left",
            label: "菜单名称",
            prop: "name",
            width: 120,
          },
          {
            label: "菜单类型",
            prop: "alias",
            width: 70,
            align: "center",
          },
          {
            label: "路由",
            prop: "path",
          },
          {
            label: "排序",
            prop: "orders",
            align: "center",
            width: 70
          },
          {
            label: "权限标识",
            prop: "code",
          },
          {
            label: "状态",
            prop: "enableFlag",
            align: "center",
            width: 70,
            dicData: [
              {
                label: "启用",
                value: 1
              },
              {
                label: "停用",
                value: 0
              },
            ]
          }
        ]
      },
      selection: [],

      iconList: iconList,

      type: "open"
    }
  },
  methods: {
    open(row) {
      this.tableData = row.menuList;
      this.type = "open";
    },
    view(row) {
      this.type = "view";
      this.detail(row)
    },
    edit(row) {
      this.type = "edit";
      this.detail(row)
    },
    detail(row) {
      this.tableData = row.menuList;
      api.getDetail({oid: row.oid}).then(res => {
        let data = res.data.data;

        this.formData = JSON.parse(JSON.stringify(data));

        this.tableData.forEach(item => {
          if (data.menuChildrenIds.includes(item.oid)) {
            this.$refs["crud"].toggleRowSelection(item, true);
          }
        })
      })
    },
    save() {
      this.$refs["form"].validate(f => {
        if (f) {
          let method = this.type === "edit" ? 'update' : 'save'
          this.formData.menuChildrenIds = this.selection.map(i => i.oid).join(",")
          api[method](this.formData).then(_ => {
            this.$message.success("保存成功");
            this.$emit('removeThisTabs');
            this.$emit("refresh");
          })
        }
      })
    }
  }
}
</script>

<template>
  <div class="topMenuTemp">
    <el-form :model="formData" :disabled="type==='view'" label-width="100px" size="small" :rules="rules" ref="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="nameCn">
            <el-input v-model="formData.nameCn"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编码标识" prop="name">
            <el-input v-model="formData.name" :disabled="type!=='open'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图标">
            <avue-input-icon v-model="formData.icon"
                             :icon-list="iconList"
                             :modal-append-to-body="false"
                             placeholder="图标"></avue-input-icon>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序">
            <el-input-number style="width: 100%;" :min="0" v-model="formData.orders"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group size="mini" v-model="formData.enableFlag">
              <el-radio-button :label="1">启用</el-radio-button>
              <el-radio-button :label="0">禁用</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>顶部菜单子菜单</el-col>
        <el-col :span="24">
          <avue-crud :option="option"
                     :data="tableData"
                     @selection-change="v=>selection=v"
                     ref="crud">
          </avue-crud>
        </el-col>
      </el-row>
    </el-form>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" @click="save" v-if="type!=='view'">保存</el-button>
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.topMenuTemp {
  width: 100%;
}
</style>
